<template>
  <BeforeNavBar/>
  <div class="before-course-intro">
    <div class="header">      
        <div class="kuang">
          <h1>{{ courseName }}</h1>
        </div>
        </div>      
      </div>
      
      <div class="bg">
        
        <div class="container">
          <div class="content">
            <div class="kcjs">
              <h2 class="section-title">课程介绍</h2>
              <!-- <hr class="section-line"> -->
              <p>{{ introduction }}</p>
              <img :src="introImage" alt="Course Intro Image">
            </div>
          </div>
        
          <div class="sidebar">
            <!-- <div class="kcgg">
              <h2 class="section-title">课程公告</h2>
              <hr class="section-line">
              <p>{{ noticeTitle }}</p>
              <p>{{ noticeContent }}</p>
            </div> -->
            
            <div class="jxtd">
              <h3 class="section-title">教学团队</h3>
              <hr class="section-line">
              <ul class="team">
                <!-- 使用 v-for 指令循环渲染技术列表数据 -->
                 <li v-for="teacher in teachers" :key="teacher.username">
                  <img :src="teacher.avatar" alt="教师头像" width="60" height="60">
                  <div class="identity">
                  {{ teacher.username }}
                </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
 
</template>

<script>
import axios from 'axios';
import BeforeNavBar from './BeforeNavBar.vue';
export default {
  name: 'CourseIntro',
  components: {
    BeforeNavBar
  },
  data() {
      return {
        courseName: '',
        introduction: '',
        introImage: '',
        noticeTitle: '',
        noticeContent: '',
        
        teachers: [],
        semesterIds:0,
        showModal: false
      };
    },
   
    mounted() {
     // 获取路由中的查询参数 semesterIds
    this.semesterIds = this.$route.query.semesterIds;  // 使用正确的属性名
    console.log('Semester IDs:', this.semesterIds); // 输出到控制台，检查参数是否正确获取到
  
    // 调用获取课程数据的方法，可以根据需要命名为 fetchCourseData
    this.fetchCourseData();
    },
    methods: {
      async fetchCourseData() {      
        try {
          // 同时发起两个请求
          const [teachersResponse, courseInfoResponse] = await Promise.all([
            axios.get('http://8.138.12.59:1999/teacher/showteam', {
              params: {
                course_id: 1,          
              }
            }),
            axios.get('http://8.138.12.59:1999/semesters/showbase', {
              params: {
                semester_id: 1,             
              }
            })
          ]);
          const teachersData = teachersResponse.data.data;
          const courseInfoData = courseInfoResponse.data.data;
          teachersData.forEach(teachersData => {
    // 将接口返回的数据转换为需要的格式
    const teacher = {
      id: teachersData.id, 
      username: teachersData.username,
      avatar: teachersData.img_url
    };
    // 将课程对象添加到 courses 数组中
    this.teachers.push(teacher);
  });
          this.courseName = courseInfoData.semester_name;        
          this.introduction = courseInfoData.semester_intro;         
          this.introImage = courseInfoData.resource_url;
          this.noticeTitle = courseInfoData.notice_title;
          this.noticeContent=courseInfoData.notice_content;   
        } catch (error) {
          console.error('Error fetching course data:', error);
          if (error.response) {
      console.error('Response status:', error.response.status);
      console.error('Response data:', error.response.data);
    }
        }
      },
   
    }
};
</script>
<style scoped>

.before-course-intro {
  display: flex;
  flex-direction: column;
}

.header {
  text-align: left;
  padding-left: 80px;
  height:80px;
  background-size: cover; /* 背景图尺寸适应容器 */
  background-image: url('@/assets/course_intro_bg.png');
  color:white;
  margin: 0 150px 0 150px;
}

.kuang{
   width: 600px;
}

.info {
  list-style: none;
  display: flex;
  max-width: 500px;
  padding: 0;
  margin: 0px; 
  /* justify-content: space-around; */
}
.info li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;  margin-right: 30px; /*间距值 */
  color:white;
}
.bg{
  background-color: #f9f9f9;
  margin: 0 150px 0 150px;
}

/* 按钮和弹框 */
.button{
  padding: 8px 24px;
  margin-left:360px;
  position: relative;
  bottom: 40px;
  border: none;
  background-color: rgb(59, 150, 255);
  border-radius: 5px; /* 圆角半径为5像素 */
  color: white;
  font-size: 16px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}


.btn{
  margin-left: 235px;
  padding-top: 20px;
}

.btncf{
  padding: 4px 18px;
  margin-right: 15px;
  background-color:white;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.action-button {
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.action-button:hover {
  background-color: rgb(59, 150, 255);
  color: white;
}

/* 开课时间结课时间 */
.time {
  list-style: none;
  display: flex;
  text-align: center;
  margin-top:3px;
  padding-left: 160px;
  background-color: rgb(244, 241, 241);
  height:36px;
}
.time li {
  display: flex;
  align-items: center;
  text-align: center;
  padding-right: 30px;
}

.time li span {
  padding-right:6px;
}

.span1 {
  color: rgb(93, 92, 92);
}


.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 在大屏幕上内容水平居中 */
  width: 1000px;
  margin-right: auto;
  margin-left: auto;
  min-height: 100vh; 
}

.content {
  flex: 1 1 auto; 
  max-width: calc(70% - 20px); 
  margin-right: 20px; 
}

.sidebar {
  flex: 1 1 auto; 
  max-width: 30%; 
}
.section-title {
  font-size: 25px; 
  font-weight: bold; /* 标题加粗 */
  text-align: center; /* 标题居中 */
  margin-bottom: 10px; /* 标题与内容之间的间距 */
}
.section-line {
  border-top: 1px solid #ccc; /* 分隔线样式 */
  margin: 10px 0; /* 分隔线与内容之间的间距 */
}
.kcjs{
 
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  border: 2px solid rgb(243, 241, 241); 
}
.kcgg{
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  border: 2px solid rgb(243, 241, 241); 
}
.jxtd{
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  border: 2px solid rgb(243, 241, 241); /* 设置边框为黑色实线，宽度为2像素 */
}

.kcjs img {
  max-width: 100%; 
  height: auto; 
  display: block; /* 使图片垂直居中 */
 
}

.team {
    list-style: none;
    display: flex;
    padding: 0;
    justify-content: center;
  }
  .team li {
    margin-bottom: 10px;
    align-items: center;
    margin-right: 10px;
  }
  .team li img {
    border-radius: 50%; /* 圆形头像 */
  }
</style>
